<template>
	<!--仪器维护计划-->
	<div class="equipPlan">
		<div class="tableThree">
			<div style="height:40px;line-height:40px;color:#333;font-size:13px">
				仪器保养计划
			</div>
			<div class="rowTable">
				<el-table :data="upKeepData" style="width: 100%;height:100%;"  class="tableCon" size="mini" key="upKeepData" ref="standardTable">
					<el-table-column label="序号" min-width="50px">
						<template slot-scope="scope">
							{{scope.$index+1}}
						</template>
					</el-table-column>
					<el-table-column property="name" label="名称" min-width="100px">
					</el-table-column>
					<el-table-column property="startDate" label="开始日期" min-width="100px">
						<template slot-scope="scope">
							{{scope.row.hasOwnProperty('startDate')?scope.row.startDate.split('.')[0]:'/'}}
						</template>
					</el-table-column>
					<el-table-column property="cycle" label="周期" min-width="100px">
						<template slot-scope="scope">
							每{{scope.row.times + scope.row.spaceTime}}1次
						</template>
					</el-table-column>
					<el-table-column property="nextDate" label="下达日期" min-width="150px">
						<template slot-scope="scope">
							{{scope.row.hasOwnProperty('nextDate')?scope.row.nextDate.split('.')[0]:'/'}}
						</template>
					</el-table-column>
					<el-table-column property="status" label="状态" min-width="90px">
						<template slot-scope="scope">
							<span v-if="scope.row.status === 0">已停用</span>
							<span v-if="scope.row.status === 1">已启用</span>
							<span v-if="scope.row.status === 2">草稿</span>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<div class="tableThree">
			<div style="height:40px;line-height:40px;color:#333;font-size:13px">
				检定校准计划
			</div>
			<div class="rowTable">
				<el-table :data="verificationData" style="width: 100%;height:100%;" class="tableCon" size="mini" key="verificationData" ref="standardTable">
					<el-table-column label="序号" min-width="50px">
						<template slot-scope="scope">
							{{scope.$index+1}}
						</template>
					</el-table-column>
					<el-table-column property="name" label="名称" min-width="100px">
					</el-table-column>
					<el-table-column property="startDate" label="有效日期" min-width="100px">
					</el-table-column>

					<el-table-column property="nextDate" label="下达日期" min-width="200px">
						<template slot-scope="scope">
							{{scope.row.hasOwnProperty('nextDate')?scope.row.nextDate.split('.')[0]:'/'}}
						</template>
					</el-table-column>
          <el-table-column property="request" label="校准参数" min-width="100px">
          	<template slot-scope="scope">
          		{{scope.row.request?scope.row.request:'/'}}
          	</template>
          </el-table-column>
          <el-table-column property="remark" label="校准周期" min-width="100px">
          	<template slot-scope="scope">
          		{{scope.row.remark?scope.row.remark:'/'}}
          	</template>
          </el-table-column>
					<el-table-column property="status" label="状态" min-width="90px">
						<template slot-scope="scope">
							<span v-if="scope.row.status === 0">已停用</span>
							<span v-if="scope.row.status === 1">已启用</span>
							<span v-if="scope.row.status === 2">草稿</span>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<div class="tableThree">
			<div style="height:40px;line-height:40px;color:#333;font-size:13px">
				期间核查计划
			</div>
			<div class="rowTable">
				<el-table :data="examineData" style="width: 100%;height:100%;" class="tableCon" size="mini" key="examineData" ref="standardTable">
					<el-table-column label="序号" min-width="50px">
						<template slot-scope="scope">
							{{scope.$index+1}}
						</template>
					</el-table-column>
					<el-table-column property="name" label="名称" min-width="100px">
					</el-table-column>
					<el-table-column property="startDate" label="开始日期" min-width="100px">
					</el-table-column>
					<el-table-column property="cycle" label="周期" min-width="100px">
						<template slot-scope="scope">
							每{{scope.row.times + scope.row.spaceTime}}1次
						</template>
					</el-table-column>
					<el-table-column property="nextDate" label="下达日期" min-width="150px">
						<template slot-scope="scope">
							{{scope.row.hasOwnProperty('nextDate')?scope.row.nextDate.split('.')[0]:'/'}}
						</template>
					</el-table-column>
          <el-table-column property="request" label="期间核查方法" min-width="100px">
          	<template slot-scope="scope">
          		{{scope.row.request?scope.row.request:'/'}}
          	</template>
          </el-table-column>
					<el-table-column property="status" label="状态" min-width="90px">
						<template slot-scope="scope">
							<span v-if="scope.row.status === 0">停用</span>
							<span v-if="scope.row.status === 1">启用</span>
							<span v-if="scope.row.status === 2">草稿</span>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		props: {
			maintainData: Object
		},
		data() {
			return {
				equipmentId: '',
				tableHeightD: ((window.innerHeight - 300) / 3 - 25),
				//保养计划列表
				upKeepData: [],
				//检定校准计划列表
				verificationData: [],
				//期间核查计划列表
				examineData: [],
			}
		},
		mounted() {
			this.equipmentId = this.maintainData.id
			this.init()
		},
		methods: {
			init() {
				this.$http({
					apiUrl: 'resource/readEquipPlanList.htm',
					method: 'post',
					params: { id: this.maintainData.id },
				}).then(res => {
					if (res.code == 0) {
						this.upKeepData = []
						this.verificationData = []
						this.examineData = []
						res.data.forEach(i => {
							if (i.maintainType === "MA01") {
								this.upKeepData.push(i)
							}
							if (i.maintainType === "MA02") {
								this.verificationData.push(i)
							}
							if (i.maintainType === "MA03") {
								this.examineData.push(i)
							}
						})
					}
				})
			},
		}
	}

</script>

<style scoped>
	.maintainBtn {
		position: absolute;
		right: 20px;
		top: 5px;
	}
</style>
<style>
	.equipPlan {
		height: 100%;
	}
	.equipPlan .tableThree{
		height: 33%;
	}
	.equipPlan .rowTable {
		width: 100%;
		margin-top: 5px;
		height: calc(100% - 45px)
	}
</style>
